<template>
  <div class="contentLayout">
    <Snackbar></Snackbar>
    <van-form @submit="onSubmit">
      <van-field v-model="fromData.oldPassword" label="旧密码" label-width="70" placeholder="请输入密码"
                 :maxlength="16" type="password"
                 :rules="[{ required: true, message: '请填旧密码' }]"/>

      <van-field v-model="fromData.newPassword" label="新密码" label-width="70" placeholder="请输入密码"
                 :maxlength="16" type="password"
                 :rules="[{ required: true, message: '请填新密码' }]"/>

      <van-field v-model="fromData.newPassword2" label="确认密码" label-width="70" placeholder="再次输入确认密码"
                 :maxlength="16" type="password"
                 :rules="[{ required: true, message: '请填写确认密码' },{validator : checkPwd2,message:'两次输入的密码不一致'}]"/>
      <van-button :loading="loading" :disabled="loading" type="info" block>确认修改</van-button>
    </van-form>
  </div>
</template>

<script>
  import Snackbar from '@/components/Snackbar/index'
  import {updatePassword} from "@/api/user";
  import {Dialog} from 'vant';
  import {removeToken} from '@/utils/auth'

  export default {
    name: "editPassword",
    components: {Snackbar},
    data() {
      return {
        loading: false,
        fromData: {
          oldPassword: "",
          newPassword: "",
          newPassword2: ""
        }
      }
    },
    methods: {
      onSubmit() {
        this.loading = true;
        let _this = this;
        updatePassword(this.fromData).then(response => {
          Dialog.alert({
            title: '系统提示',
            message: '修改成功,请重新登录',
          }).then(() => {
            removeToken();
            _this.$router.replace('/');
          });
        }, compile => {
          _this.loading = false
        })
      },
      checkPwd2(value, rule) {
        return this.fromData.newPassword == this.fromData.newPassword2
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import './index.scss';
</style>
